<template>
  <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
    <n-layout-sider bordered content-style="padding: 24px;">aside</n-layout-sider>
    <n-layout content-style="padding: 24px;" :native-scrollbar="false">
      <router-view></router-view>
      <div class="talk">
        <n-grid cols="2 s:2 m:3 l:4 xl:5 2xl:6" responsive="screen">
          <div class="card-box" v-for="card in talkCards" :key="card.id">
            <n-card :title="card.title" hoverable @click="handleUpdateValue(card.title)">
              <template #cover>
                <img :src="card.imgsrc" />
              </template>
              {{ card.content }}
            </n-card>
          </div>
        </n-grid>
      </div>
    </n-layout>
  </n-layout>
  <n-global-style />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import talkCard from '../types/talkCard'
const talkCards = ref<talkCard[]>([
  { id: 1, title: 'leetcode', imgsrc: "https://typorastroage.oss-cn-beijing.aliyuncs.com/img/652e0bd84f383f676ff380f53878a93.jpg", content: '测试leetcode' },
  { id: 2, title: '测试卡片', imgsrc: "https://typorastroage.oss-cn-beijing.aliyuncs.com/img/652e0bd84f383f676ff380f53878a93.jpg", content: '测试杂杂碎' },
  { id: 3, title: '测试卡片', imgsrc: "https://typorastroage.oss-cn-beijing.aliyuncs.com/img/652e0bd84f383f676ff380f53878a93.jpg", content: '测试杂杂碎' },
  { id: 4, title: '测试卡片', imgsrc: "https://typorastroage.oss-cn-beijing.aliyuncs.com/img/652e0bd84f383f676ff380f53878a93.jpg", content: '测试杂杂碎' },
  { id: 5, title: '测试卡片', imgsrc: "https://typorastroage.oss-cn-beijing.aliyuncs.com/img/652e0bd84f383f676ff380f53878a93.jpg", content: '测试杂杂碎' },
  { id: 6, title: '测试卡片', imgsrc: "https://typorastroage.oss-cn-beijing.aliyuncs.com/img/652e0bd84f383f676ff380f53878a93.jpg", content: '测试杂杂碎' },
  { id: 7, title: '测试卡片', imgsrc: "https://typorastroage.oss-cn-beijing.aliyuncs.com/img/652e0bd84f383f676ff380f53878a93.jpg", content: '测试杂杂碎' },
])

import { useRouter } from 'vue-router'
const router = useRouter()
const handleUpdateValue = (key: string) => {
  console.log(key)
  router.push({
    path: `/talk/${key}`
  })
}
</script>

<style scoped>
.anchor-box {
  position: fixed;
  top: 100px;
  right: 15px;
}
.talk {
  margin: 20px;
}
.n-card {
  width: 200px;
  height: 300px;
  margin: 10px;
}
</style>